<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="a1">
    <p>姓名：<input type="text"></p>
    <p>年龄：<input type="text"></p>
    <p>电话：<input type="text"></p>
    <p>住址：<input type="text"></p>

    <button onclick=button()>按钮</button>

</body>
<script>
    //第一题
    // 提取body
    var a1 = document.getElementById("a1");
    // 把body里面的所有节点赋值给a2
    var a2 = a1.childNodes;
    // body里面所有节点的长度
    console.log("里面一共有" + a2.length + "个");
    // 循环遍历a1循环输出所有的节点
    for (i = 0; i < a2.length; i++) {
        console.log("第" + i + "的节点名称" + a2[i].nodeName);
        //nodeName节点名称
    }

    //第二题

    // 创建p标签
    var a3 = document.createElement("p");
    // 为p标签添加id 值为sex
    a3.setAttribute("id", "sex");
    // 创建input标签
    var new1 = document.createElement("input");
    // 创建文本内容
    var txt = document.createTextNode("性别：");
    // 把创建的p标签插入到第二个input标签的前面
    a1.insertBefore(a3, a1.children[1]);
    // 把文本内容添加到新的p标签中
    a3.appendChild(txt);
    // 把新的input标签添加到p标签里面
    a3.appendChild(new1);

    //第三题
    // 遍历所有的input标签
    var demo = document.getElementsByTagName("input");

    var button=function () {
       alert("姓名:"+demo[0].value+"性别"+demo[1].value+"年龄"+demo[2].value+"电话"+demo[3].value+"住址"+demo[4].value);
    }

//第四题



demo[4].style.width="200px" ;
demo[4].style.height="100px";
demo[4].style.border="2px red solid";



</script>

</html>